<div id='category_block' >
	<h3>Categories:</h3>
	<hr />
<?php
//when in product index
if($this->categoriesFromProduct){
	echo $this->treeMaker($this->categoriesFromProduct, '', 0, false);
}else{
	echo  $this->treeMaker($this->categories, '', 0, true);
}
?>
<fieldset id='category_action_form'>
<legend>Action</legend>
<span id='close'>x</span>
<?php
echo $this->form;
?>
</fieldset>
</div>
<div id='delete_block'>
  <h4>Do you really want to delete this category</h4>
  <hr />
  <button class='yes'>yes</button>
  <button class='no'>no</button>
</div>
<script language='javascript'>

$(function(){


	$('#category_block ul').has('ul').children('li').prepend('<abbr>+</abbr>');
	$('#category_block ul').has('ul').children().not('span').not(':first-child').hide();
	$('#category_block ul li').css('list-style','none');
	$('#category_block ul li').css('float','none').next('#category_action').hide();
	$('#category_block ul li').live('click',function(e){
		var e = e || window.event;
		$(this).next('#category_action').css('border','2px solid #ddd').toggle(400);
	});

	$('#category_block ul li abbr').live('click',function(e){
		var e = e || window.event;
		if($(this).html() == '+'){
			$(this).html('-');
		}else{
			$(this).html('+');
		}
		var fatherChildren = $(this).parent().parent().children().not('#category_action_form').not('span').not(':first-child');

		fatherChildren.toggle(200);
		e.stopPropagation();

	});

//has_child
//title
//parent_id

	$('#close').click(function(){
		$('#category_action_form').hide(200);
		$(this).parent().prev().prev().css('color','#000');
	});
	$('#delete_block .no').click(function(){
		$(this).parent('#delete_block').hide(200);
		$(this).parent('#delete_block').prev().prev().css('color','#000');
	});
	$('#delete_block .yes').click(function(){
		$(this).parent('#delete_block').hide(200);
		$(this).parent('#delete_block').prev().prev().css('color','#000');
	});
	$('#category_action_form').hide();//form
	$('#category_action a').live('click',function(e){
		var e = e || window.event;

		var actionName = $(this).text();
		$(this).parent().prev('li').css('color','#ff7070');
		$(this).parent('#category_action').hide(200);
		$('#category_action_form legend').html($(this).html()+' category');
		if(actionName != 'delete'){
			$('#category_action_form').insertAfter($(this).parent()).show(200);
		}else{
			$('#delete_block').insertAfter($(this).parent()).show(200);
		}

		var href = $(this).attr('href');

		var category = $(this).parent('#category_action').prev('li');
		if(actionName == 'edit'){
			$('#title').val(category.text());
		}
		var delete_block = '#delete_block  .yes';
		var add_edit_block = '#category_submit';
	    if(actionName  == 'delete'){
			var active_block = delete_block;
		}else if(actionName  == 'add' || actionName  == 'edit'){
			var active_block = add_edit_block;
		}

		$(active_block).live('click',function(){
			var form_title = $('#title').val();
			var form_has_child = $('#has_child').val();
			var form_parent_id = $('#parent_id').val();
			$('#category_block ul li').css('color','#000');
			$.ajax({
				type: "POST",
				url: href,
				data: ({title    : form_title,
						has_child: form_has_child,
						parent_id: form_parent_id
				}),
				success: function(data){
					$('#category_action_form').hide(200);
					//for editing
					if(actionName == 'edit'){

						var abbr = '<abbr>+</abbr>';

						var new_title = category.html().replace(/(.*)/, data.edit_title);
						if(category.html().search('abbr')>0){
							category.html(abbr+new_title);
						}else{
							category.html(new_title);
						}

					}
					//for adding
					else if(actionName == 'add'){
						var newChild = $('<ul id="new_child;"><li style="list-style:none">'+data.add_title+'</li>');
						var categoryAction = $('#category_action').clone();
						newChild.append(categoryAction);
						category.append(newChild);
						category.parent('ul').children().not('span').not(':first-child').hide();
					}else if(actionName == 'delete'){

						if(data.flag){
							var del_info = '<div style="padding:5px;border:1px solid #eee;">'+data.delete_info+'</div>';
							$(del_info).appendTo(category).hide().show(200).delay(200).hide(200);
							category.next('#category_action').remove();
							category.remove();
							$(del_info).remove();
						}else{
							var del_info = '<div style="padding:5px;border:1px solid #eee;">'+data.delete_info+'</div>';
							$(del_info).appendTo(category).hide().show(200).delay(200).hide(200);
							category.next('#category_action').remove();

						}
					}
				}
			});
			return false;
			})

		return false;
	});
;
});

</script>